import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    Dimensions,
    PixelRatio,
    ScrollView
} from 'react-native';
import { Badge, Label } from 'iftide';

export default class Basic extends Component {
    render() {
        return (
            <View>
                <View style={styles.label}>
                    <Label text = '消息提醒样式一 - 小红点' fontWeight={'bold'} textDecorationLine={'underline'}/>
                </View>
                <View style={styles.list}>
                    <Label text = 'Dot' type={'secTitle'} labelStyle={{paddingLeft: 13, paddingTop: 10}}/>
                    <Badge dotStyle={[styles.dotStyle, {top: 15}]}/>
                </View>
                <View style={styles.list}>
                    <Label text = 'Dot' type={'secTitle'} labelStyle={{paddingLeft: 13, paddingTop: 10}}/>
                    <Badge dotStyle={styles.dotStyle}  text={'1'} backgroundColor={'#607483'}/>
                </View>
                <View style={styles.list}>
                    <Label text = 'Dot' type={'secTitle'} labelStyle={{paddingLeft: 13, paddingTop: 10}}/>
                    <Badge dotStyle={styles.dotStyle}  text={'NEWNEW'} backgroundColor={'green'}/>
                </View>
                <View style={styles.list}>
                    <Label text = 'Dot' type={'secTitle'} labelStyle={{paddingLeft: 13, paddingTop: 10}}/>
                    <Badge dotStyle={styles.dotStyle}  text={'1231'}/>
                </View>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    label: {
        padding: 13,
        backgroundColor: '#F5F7F9',
        borderBottomWidth: 1,
        borderBottomColor: '#D8D8D8',
    },
    list: {
        height: 44,
        borderBottomWidth: 1,
        borderBottomColor: '#D8D8D8',
    },
    dotStyle:{
        position: 'absolute',
        top: 10,
        right: 15,
    }
});
